<template>
  <div>
    <div class="vip">
      <h1>工资明细</h1>
    </div>
    <!-- 展示 -->
    <div class="table">
      <el-table
        :data="tableData"
        style="width: 100%"
        height="450"
        @selection-change="handleSelectionChange"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <el-table-column type="selection" width="45"> </el-table-column>
        <el-table-column
          type="index"
          :index="1 + (queryInfo.page - 1) * queryInfo.size"
          label="编号"
          width="60"
        >
        </el-table-column>
        <el-table-column prop="payday" label="发薪时间" width="180">
        </el-table-column>
        <el-table-column prop="required_attendance_days" label="应到天数">
        </el-table-column>
        <el-table-column prop="actual_attendance_days" label="实到天数">
        </el-table-column>
        <el-table-column prop="sick_leave_days" label="病假天数">
        </el-table-column>

        <el-table-column prop="personal_leave_days" label="事假天数">
        </el-table-column>
        <el-table-column prop="absenteeism_days" label="调休天数">
        </el-table-column>
        <el-table-column prop="personal_leave_days" label="事假天数">
        </el-table-column>
        <el-table-column prop="basic_salary" label="基本薪资">
        </el-table-column>
        <el-table-column prop="actual_salary" label="实际薪资">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span @click="lookMore(scope.row)" style="cursor:pointer;color:#3e66e1;">查看更多</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="queryInfo.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>

      <el-dialog
        title="详细信息"
        :visible.sync="dialogVisible"
        center
        @close="dialogVisible = false"
      >
        <el-descriptions direction="vertical" :column="4" border>
          <el-descriptions-item label="发薪时间">{{
            salaryInfo.payday
          }}</el-descriptions-item>
          <el-descriptions-item label="应到天数">{{
            salaryInfo.required_attendance_days
          }}</el-descriptions-item>
          <el-descriptions-item label="实到天数">{{
            salaryInfo.actual_attendance_days
          }}</el-descriptions-item>
          <el-descriptions-item label="休息日">{{
            salaryInfo.days_off
          }}</el-descriptions-item>
          <el-descriptions-item label="病假天数">{{
            salaryInfo.sick_leave_days
          }}</el-descriptions-item>
          <el-descriptions-item label="事假天数">{{
            salaryInfo.personal_leave_days
          }}</el-descriptions-item>
          <el-descriptions-item label="调休天数">{{
            salaryInfo.absenteeism_days
          }}</el-descriptions-item>
          <el-descriptions-item label="迟到天数">{{
            salaryInfo.late_days
          }}</el-descriptions-item>
          <el-descriptions-item label="早退天数">{{
            salaryInfo.leave_early_days
          }}</el-descriptions-item>
          <el-descriptions-item label="病假扣除薪资">{{
            salaryInfo.sick_deducted_salary
          }}</el-descriptions-item>
          <el-descriptions-item label="事假扣除薪资">{{
            salaryInfo.personal_deducted_salary
          }}</el-descriptions-item>
          <el-descriptions-item label="调休扣除薪资">{{
            salaryInfo.absenteeism_deducted_salary
          }}</el-descriptions-item>
          <el-descriptions-item label="迟到扣除薪资">{{
            salaryInfo.late_deducted_salary
          }}</el-descriptions-item>

          <el-descriptions-item label="早退扣除薪资">{{
            salaryInfo.leave_deducted_salary
          }}</el-descriptions-item>
          <el-descriptions-item label="基本薪资">{{
            salaryInfo.basic_salary
          }}</el-descriptions-item>
          <el-descriptions-item label="实际薪资">{{
            salaryInfo.actual_salary
          }}</el-descriptions-item>
        </el-descriptions>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getUserSalaryList } from "@/api/user";
export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      //查询信息实体
      queryInfo: {
        page: 1, //当前页
        size: 10, //每页最大数
      },
      total: 0, //总记录数
      //表单宽度
      formLabelWidth: "120px",
      deleteIds: [],
      salaryInfo: {},
    };
  },
  methods: {
    async getList() {
      getUserSalaryList(this.queryInfo).then((res) => {
        this.total = res.total;
        this.tableData = res.data;
      });
    },
    lookMore(row) {
      console.log(row);
      this.salaryInfo = row;
      this.dialogVisible = true;
    },

    //最大数
    handleSizeChange(newSize) {
      this.queryInfo.size = newSize;
      this.getList();
    },
    //pageNum的触发动作
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage;
      this.getList();
    },

    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.deleteIds = selection.map((item) => item.id);
      console.log(this.deleteIds);
    },

    showUpdateDialog(id) {
      this.updateDialogVisible = true;
      // this.updateForm = currentData;
      getVipDetail(id).then((res) => {
        this.updateForm = res;
      });
    },
  },
  created() {
    this.getList();
  },
  mounted() {},
};
</script>

<style>
.vip {
  margin: 0 10px;
}
h1 {
  font-size: 24px;
  font-weight: 400;
  padding-bottom: 10px;
  color: #565758;
}
.pagination {
  width: 400px;
  margin: 10px auto;
}
</style>
